<extend name="public@base" xmlns:poral="http://www.w3.org/1999/html" xmlns:portal="http://www.w3.org/1999/html"
        xmlns:portal="http://www.w3.org/1999/html" xmlns:portal="http://www.w3.org/1999/html"/>

<block name="head">
    <title>{$site_info.site_name|default=''}</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/owl.carousel.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/owl.theme.css">
    <link href="__TMPL__/public/assets/css/superfish.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/component.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/parallax-slider.css" />
    <script type="text/javascript" src="__TMPL__/public/assets/js/owl.carousel.js"></script>
</block>

<block name="body">
    <!--轮播图-->
    <div id="da-slider" class="da-slider">
            <slides id="$theme_vars['top_slide']">
                <div class="da-slide">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h2>
                                <php>
                                    $slide_title= explode('|',$vo['title']);
                                    $slide_desc=explode('|',$vo['description']);
                                </php>
                                <volist name="slide_title" id="v">
                                    <i>{$v}</i>
                                    <br>
                                </volist>
                            </h2>
                            <p>
                                <volist name="slide_desc" id="v1">
                                    <i>{$v}</i>
                                    <br>
                                </volist>

                            </p>
                            <a href="{$vo.url}" class="btn btn-info btn-lg da-link">
                                Read more
                            </a>
                            <div class="da-img">
                                <img src="{$vo.image|cmf_get_image_url}" alt="image01" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </slides>
            <noslides id="$theme_vars['top_slide']">
                <li>你还没有创建幻灯片;</li>
            </noslides>




        <nav class="da-arrows">
        <span class="da-arrows-prev">
        </span>
            <span class="da-arrows-next">
        </span>
        </nav>
    </div>

    <!--第一板块-->
    <widget name="first_section">
        <div class="container">
        <div class="row mar-b-50">
            <div class="col-md-12">
                <div class="text-center feature-head wow fadeInDown">
                    <h1 class="">
                       {$widget.title}
                    </h1>
                </div>
                <div class="feature-box">
                    <portal:articles  limit="3"  categoryIds="$widget.vars.category"  item="vo"  order="post.published_time DESC" returnVarName="articles_data">
                        <div class="col-md-4 col-sm-4 text-center wow fadeInUp">
                            <div class="feature-box-heading">
                                <em>
                                    <img src="{$vo.thumbnail|cmf_get_image_url}" alt="" width="100" height="100">
                                </em>
                                <h4>
                                    <b>{$vo.post_title}</b>
                                </h4>
                            </div>
                            <p class="text-center">
                                {$vo.post_excerpt}
                            </p>
                        </div>
                    </portal:articles>

                </div>

                <!--feature end-->
            </div>
        </div>
    </div>
    </widget>

    <!--第二板块-->
    <widget name="second_section">
        <php>
            $service = new \app\portal\service\ApiService();
            $page = $service->page($widget['vars']['page_id']);
        </php>
        <noempty name="$page">
            <!--property start-->
            <div class="property gray-bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 text-center wow fadeInLeft animated" data-wow-animation-name="fadeInLeft" style="visibility: visible; animation-name: fadeInLeft;">
                        <img src="{$page.more.thumbnail|cmf_get_image_url}" alt="">
                    </div>
                    <div class="col-lg-6 col-sm-6 wow fadeInRight animated" data-wow-animation-name="fadeInRight" style="visibility: visible; animation-name: fadeInRight;">
                        <h1>
                            {$page.post_title}
                        </h1>
                        <hr>
                        <p>
                            <i class="fa fa-check fa-lg pr-10">
                            </i>
                            {$page.post_title}
                        </p>
                        <hr>
                        <eq name="$widget.vars.btn_display" value="1">
                            <a href="{$widget.vars.btn_link}" class="btn btn-purchase"  <eq name="$widget.vars.view_new" value="1">target="_blank"</eq> >
                                {$widget.vars.btn_title}
                            </a>
                        </eq>
                    </div>
                </div>
            </div>
        </div>
            <!--property end-->
        </noempty>
    </widget>

    <!--第三板块-->
    <widget name="third_section">
        <div class="container">

            <div class="row mar-b-60">
                <div class="col-lg-6">
                    <!--tab start-->
                    <section class="tab wow fadeInLeft animated" data-wow-animation-name="fadeInLeft" style="visibility: visible; animation-name: fadeInLeft;">
                        <header class="panel-heading tab-bg-dark-navy-blue">
                            <ul class="nav nav-tabs nav-justified ">
                                <volist name="$widget.vars.news" id="vo">
                                    <li  <eq name="$i" value="1">class="active"</eq>  >
                                        <a data-toggle="tab" href="#news-{$i}">{$vo.category_id_text_}</a>
                                    </li>
                                </volist>
                            </ul>
                        </header>
                        <div class="panel-body">
                            <div class="tab-content tasi-tab">
                                <volist name="$widget.vars.news" id="vo" key="k">
                                    <php>$class_text = $i==1? 'in active':'';</php>
                                    <div id="news-{$k}" class="tab-pane fade {$class_text}">
                                        <portal:articles limit="$vo.count" order="post.published_time DESC" categoryIds="$vo.category_id" item="v">
                                            <article class="media">
                                            <a class="pull-left thumb p-thumb">
                                                <img src="{$v.more.thumbnail|cmf_get_image_url}" alt="">
                                            </a>
                                            <div class="media-body b-btm">
                                                <a href="{:cmf_url('portal/Article/index',['id'=>$v.id,'cid'=>$vo.category_id])}" class=" p-head">
                                                    {$v.post_title}
                                                </a>
                                                <p>
                                                    {$v.post_excerpt}
                                                </p>
                                            </div>
                                        </article>
                                        </portal:articles>
                                    </div>
                                </volist>

                            </div>
                        </div>
                    </section>
                    <!--tab end-->
                </div>
                <div class="col-lg-6">
                    <!--testimonial start-->
                    <div class="about-testimonial boxed-style about-flexslider ">
                        <section class="slider wow fadeInRight animated" data-wow-animation-name="fadeInRight" style="visibility: visible; animation-name: fadeInRight;">
                            <div class="flexslider">
                                <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                    <ul class="slides about-flex-slides" style="width: 800%; transition-duration: 0s; transform: translate3d(-555px, 0px, 0px);">
                                        <portal:articles categoryIds="$widget.vars.slide" order="post.published_time DESC">
                                            <li class="clone" style="width: 555px; float: left; display: block;">
                                            <div class="about-testimonial-image ">
                                                <img alt="" src="{$vo.more.thumbnail|cmf_get_image_url}">
                                            </div>
                                                <php>$name=explode('|',$vo['post_title']);</php>
                                            <a class="about-testimonial-author" href="{:cmf_url('portal/Article/index',['id'=>$v.id,'cid'=>$vo.category_id])}">
                                                {$name.0}
                                            </a>
                                            <span class="about-testimonial-company">
                                               {$name.1|default=''}
                                            </span>
                                            <div class="about-testimonial-content">
                                                <p class="about-testimonial-quote">
                                                   {$vo.post_excerpt}
                                                </p>
                                            </div>
                                        </li>
                                        </portal:articles>
                                    </ul>
                                </div>
                                    <ol class="flex-control-nav flex-control-paging">
                                        <li><a class="flex-active">1</a></li><li><a class="">2</a></li>
                                    </ol>
                                <ul class="flex-direction-nav">
                                    <li><a class="flex-prev" href="#">Previous</a></li>
                                    <li><a class="flex-next" href="#">Next</a></li>
                                </ul>
                            </div>
                        </section>
                    </div>
                    <!--testimonial end-->
                </div>
            </div>
        </div>
    </widget>

    <!--第四板块-->
    <widget name="fourth_section">
        <notempty name="$widget.vars.category">

            <div class="bg-lg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 recent">
                            <h3 class="recent-work">
                                {$widget.title}
                            </h3>
                            <p>展示说明文字</p>
                            <div id="owl-demo" class="owl-carousel owl-theme wow fadeIn">
                                <portal:articles limit="10" order="post.published_time DESC" categoryIds="$widget.vars.category">
                                    <!-- {:dump($vo)} -->
                                    <foreach $vo.more.photos as $photo>
                                        <div class="item view view-tenth">
                                            <img src="{$photo.url|cmf_get_image_url}" title="{$photo.name}">
                                            <div class="mask">
                                                <a href="{:cmf_url('portal/Article/index',['id'=>$vo.id,'cid'=>$widget.vars.category])}" class="info" data-toggle="tooltip" data-placement="top" title="查看详情">
                                                    <i class="fa fa-link">
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </foreach>
                                </portal:articles>

                            </div>
                        </div>
                    </div>
                </div>
                <!--recent work end-->
            </div>

        </notempty>
    </widget>

    <widget name="fifth_section">
        <div id="home-services">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>
                        {$widget.title}
                    </h2>
                </div>

                <portal:subCategories categoryId="$widget.vars.category" item="vo">
                    <div class="col-md-4">
                        <div class="h-service">
                            <div class="icon-wrap ico-bg round-fifty wow fadeInDown">
                                <img src="{$vo.more.thumbnail|cmf_get_image_url}" alt="" class="img-responsive">
                            </div>
                            <div class="h-service-content wow fadeInUp animated" data-wow-animation-name="fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                                <h3>
                                    {$vo.name}
                                </h3>
                                <p>
                                    {$vo.description}
                                    <br>
                                    <a href="{:cmf_url('portal/List/index',['id'=>$vo.id])}">
                                        详情
                                    </a>
                                </p>
                            </div>
                        </div>
                </div>
                </portal:subCategories>

            </div>
            <!-- /row -->

        </div>
        <!-- /container -->

    </div>
    </widget>
    <div class="hr">
        <span class="hr-inner"></span>
    </div>


    <widget name="sixth_section">
        <div class="container">
            <div class="row mar-b-50 our-clients">
                <div class="col-md-3">
                    <h2>{$widget.vars.section_name}</h2>
                    <p>{$widget.vars.excerpt}</p>
                </div>
                <div class="col-md-9">
                    <div class="outside">
                        <p>
          <span id="slider-prev">
            <a class="bx-prev" href="">← Go back</a></span>|
                            <span id="slider-next">
            <a class="bx-next" href="">Onward →</a></span>
                        </p>
                    </div>
                    <div class="bx-wrapper" style="max-width: 2170px;">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 111px;">
                            <ul class="bxslider1 clients-list" >
                                <links>
                                    <li style="float: left; list-style: none; position: relative; width: 167.8px; margin-right: 2px;">
                                        <a href="{$vo.url|default='#'}" target="{$vo.target|default=''}">
                                            <img src="{$vo.image|default=''|cmf_get_image_url}" title="{$vo.name}"  style="width:120px;height: 120px;" alt="">
                                        </a>
                                    </li>
                                </links>
                            </ul>
                        </div>
                        <div class="bx-controls bx-has-pager">
                            <div class="bx-pager bx-default-pager">
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="0" class="bx-pager-link active">1</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="1" class="bx-pager-link">2</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="2" class="bx-pager-link">3</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="3" class="bx-pager-link">4</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="4" class="bx-pager-link">5</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="5" class="bx-pager-link">6</a></div>
                                <div class="bx-pager-item">
                                    <a href="" data-slide-index="6" class="bx-pager-link">7</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CLIENTS --></div>
    </widget>


</block>

<block name="scripts">
    <script src="__TMPL__/public/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/hover-dropdown.js"></script>
    <script defer src="__TMPL__/public/assets/js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.bxslider.js"></script>

    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.parallax-1.1.3.js"></script>
    <script src="__TMPL__/public/assets/js/wow.min.js"></script>
    <script src="__TMPL__/public/assets/js/owl.carousel.js"></script>
    <script src="__STATIC__/js/wind.js"></script>

    <script src="__TMPL__/public/assets/js/jquery.easing.min.js"></script>
    <script src="__TMPL__/public/assets/js/link-hover.js"></script>
    <script src="__TMPL__/public/assets/js/superfish.js"></script>

    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.cslider.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/common-scripts.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#da-slider').cslider({
                autoplay: true,
                bgincrement: 100
            });
        });

        jQuery(document).ready(function () {
            $('.bxslider1').bxSlider({
                minSlides: 5,
                maxSlides: 6,
                slideWidth: 360,
                slideMargin: 2,
                moveSlides: 1,
                responsive: true,
                nextSelector: '#slider-next',
                prevSelector: '#slider-prev',
                nextText: '下一个 →',
                prevText: '← 上一个'
            });
        });

        $('a.info').tooltip();

        $(window).load(function () {
            $('.flexslider').flexslider({
                animation: "slide",
                start: function (slider) {
                    $('body').removeClass('loading');
                }
            });
        });

        $(document).ready(function () {
            $("#owl-demo").owlCarousel({items: 4});
        });

        jQuery(document).ready(function () {
            jQuery('ul.superfish').superfish();
        });

        new WOW().init();
    </script>
</block>
